<template>
  <div class="bl-details-modal-container" id="bl-details-modal-container">
    <a-modal
      :visible.sync="visible"
      title="数据明细"
      width="1380px"
      wrapClassName="detail-modal-warp"
      :footer="null"
      @cancel="handleClick()"
    >
      <a-empty
        v-if="left.length == 0 && right.length == 0"
        description="暂无数据"
      />
      <div v-else class="open-modal-body" v-loading="loading">
        <div class="left">
          <div class="title">左</div>
          <div class="content">
            <div
              class="item-warp"
              v-for="(v, i) in left"
              :key="i"
              :class="[v == 'true' ? '' : 'err']"
            >
              <div class="subtitle">左{{ i + 1 }}</div>
              <div class="state">{{ v === "true" ? "开" : "关" }}</div>
            </div>
          </div>
        </div>
        <div class="right">
          <div class="title">右</div>
          <div class="content">
            <div
              class="item-warp"
              v-for="(v, i) in right"
              :key="i"
              :class="[v == 'true' ? '' : 'err']"
            >
              <div class="subtitle">右{{ i + 1 }}</div>
              <div class="state">{{ v === "true" ? "开" : "关" }}</div>
            </div>
          </div>
        </div>
      </div>
    </a-modal>
  </div>
</template>
<script>
import { getVibrateDetail } from "@/api/wisdom-beam/collect-app.js";
//模版安装【弹窗】
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    dataSource: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.getData();
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      loading: false,
      resultData: {},
      left: [],
      right: [],
    };
  },
  mounted() {},
  methods: {
    getData() {
      return new Promise((resolve, reject) => {
        this.loading = true;
        let { id } = this.dataSource;
        getVibrateDetail({
          pId: id,
        })
          .then((res) => {
            let { data } = res;
            this.resultData = data?.result || {};
            let left = [];
            let right = [];
            Object.keys(this.resultData).forEach((key, index) => {
              if (key.includes("left")) {
                left.push(this.resultData[key]);
              }
              if (key.includes("right")) {
                right.push(this.resultData[key]);
              }
            });
            this.left = left.slice(0, -3);
            this.right = right.slice(0, -3);
            resolve();
          })
          .catch((_) => {
            this.resultData = {};
            this.left = [];
            this.right = [];
            reject();
          })
          .finally((_) => {
            this.loading = false;
          });
      });
    },

    getContainer() {
      return document.getElementById("bl-details-modal-container");
    },

    //关闭
    handleClick() {
      this.$emit("update:visible", false);
    },
  },
};
</script>
<style lang="less" scoped>
/deep/.detail-modal-warp {
  .ant-modal-body {
    padding: 0;
    min-height: 320px;
    position: relative;
  }
  .ant-empty {
    position: absolute;
    left: 50%;
    transform: translatex(-50%);
  }
  .open-modal-body {
    max-height: 600px;
    box-sizing: border-box;
    .flex();
    .title {
      text-align: center;
      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #525a5d;
      margin: 14px 0;
    }
    .left {
      flex: 1;
      margin: 0 10px 0 20px;
      .content {
        .flex();
        flex-wrap: wrap;
        justify-content: space-between;
      }
    }
    .right {
      flex: 1;
      margin: 0 20px 0 10px;
      .content {
        .flex();
        flex-wrap: wrap;
        justify-content: space-between;
      }
    }
    .item-warp {
      width: 80px;
      height: 50px;
      margin-bottom: 20px;
      .flex();
      flex-direction: column;
      background: url("https://jszhgd.cn/static/pc/equipment-app/tzsb_green.png")
        no-repeat center center;
      background-size: 100% 100%;
      color: #525a5d;
      .subtitle {
        font-size: 14px;
        padding: 0 10px;
      }
      .state {
        flex: 1;
        .flex();
        justify-content: center;
        font-weight: bold;
      }
      &.err {
        border-radius: 4px;
        border: 1px solid #bebec0;
        background: #f3f4f6;
        color: #aab0bc;
      }
    }
  }
}
</style>
